import React from 'react'
import { Button, message, Space,Select } from 'antd';
import { ModalForm,ProFormText,ProFormTextArea,ProFormSelect,ProFormUploadButton } from '@ant-design/pro-form';
import {useSelector,useDispatch,connect} from 'react-redux'

const Popping = ({ques,url}) => {

    const userList = useSelector(state=> state.user.userList)
    const dispatch = useDispatch();

    const update = async (values,url) => {
        console.log(values)
        await fetch(url,{
            method:'post',
            headers:{
                'Content-Type':'application/json'
            },
            body:JSON.stringify(values)})
            .then(res=>res.json())
            .then(res=>{console.log(res)})
        await dispatch({type:'add',content:['insert']})
    }

    const guess = (e) => {
        if(e.target.value.length > 10){
            message.error('输入id过长')
        };
    }

    async function getMessage(params) {
        let content;
        await fetch("http://49.233.107.127:2002/city").then(res=>res.json()).then(res=>{
            content = res;
        });
        let res = [];
        content.map(item=>{
            let temp = {};
            temp['label'] = item.cityName;
            temp['value'] = item.cityID;
            res.push(temp)
        })
        
        return res;
    }
    async function getType(params){
        let arr1 = [1,2,3];
        let arr2 = ['景点','美食','酒店'];
        let res = [];
        arr1.map((item,index) => {
            let temp = {};
            temp['label'] = arr2[index];
            temp['value'] = item;
            res.push(temp)
        })
        return res
    }

        return (
            <Space>
              
              <ModalForm title="新建项目" trigger={<Button type="primary">新建</Button>} submitter={{
                    searchConfig: {
                        submitText: '确认',
                        resetText: '取消',
                    },
                }} onFinish={async (values) => {
                    // await waitTime(2000);
                    update(values,url);
                    message.success('提交成功');
                    console.log(values)
                    return true;
                }}
                destroyOnClose={true}
                >
                    <div>
                {
                    ques.map(item=>{
                        if(item.name === 'cityID') {
                            return(
                        <ProFormSelect 
                        name={item.name}
                        request={(params) => getMessage(params)}
                        preserve={false}
                        rules={[{ required: true, message: '选择城市id'}]}
                        label="城市"
                        />

                        )}
                        else if ((item.name).search('Con')!=-1 || (item.name).search('Talk')!=-1 || (item.name).search('content')!=-1 ||  (item.name).search('Message')!=-1){
                            return <ProFormTextArea
                            name={item.name}
                            label={item.label}
                            placeholder={item.placeholder}
                            rules={[{ required: true, message: '请输入相关内容' }]}
                            preserve={false}
                            // fieldProps={inputTextAreaProps}
                          />
                        }else if((item.name).search('Img')!=-1 || (item.name).search('img')!=-1 || (item.name).search('image')!=-1){
                            let tit;
                            if(item.name == 'pubImg'){tit = '请上传酒店照片'}
                            else{tit = '请上传照片'}
                            return <ProFormUploadButton label={tit} name="upload" action="http://49.233.107.127:2002/pic" preserve={false} rules={[{ required: true, message: '上传照片'}]}/>
                           
                        }else if(item.name == 'type'){
                            return(
                                <ProFormSelect 
                                    name={item.name}
                                    request={(params) => getType(params)}
                                    preserve={false}
                                    rules={[{ required: true, message: '选择类型'}]}
                                    label="类型"
                        />
                            )
                        }else if((item.name).search('ID')!=-1 || (item.name).search('id')!=-1){
                            return <ProFormText width="md" name={item.name} label={item.label} tooltip={item.tooltip} placeholder={item.placeholder} preserve={false} rules={[{ required: true, message: '请输入相关内容' },{max:10,message:'不得超过10个字符'}]} onChange={(e) => guess(e)}/>
                        }
                        else{
                            return <ProFormText width="md" name={item.name} label={item.label} tooltip={item.tooltip} placeholder={item.placeholder} preserve={false} rules={[{ required: true, message: '请输入相关内容' }]}/>
                        }
                        
                    })
                }
                </div>
              </ModalForm>  
            </Space>
        )
    
}

export default connect()(Popping)
